<template>
  <header>
    <div class="logo">论坛</div>
    <div
      class="module"
      v-for="item in modules"
      :key="item.name"
      @click="$router.push(item.path)"
    >
      {{ item.name }}
    </div>
    <div
      class="search"
      :style="{ width: `${searchWidth}px` }"
      v-if="$route.path == '/'"
    >
      <input
        type="text"
        placeholder="搜索"
        autocomplete="off"
        @focus="searchWidth = 300"
        @blur="searchWidth = 200"
        @keyup.enter="searchArticle"
        v-model="key"
      />
      <img :src="search" alt="" @mousedown="searchArticle" />
    </div>
    <div class="user" style="margin-left: auto">
      <div class="avatar">
        <!-- <img
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            style="
              width: 50px;
              height: 50px;
              border-radius: 50%;
              margin-right: 20px;
            "
          /> -->
      </div>
      <div class="login" @click="loginVisible = true" v-if="!userStore.isLogin">
        登录
      </div>
      <div class="login" v-if="userStore.isLogin">
        <img
          :src="userStore.userInfo.avatar"
          style="
            width: 50px;
            height: 50px;
            margin-right: 10px;
            border-radius: 50%;
          "
        />
        {{ userStore.userInfo.name }}
      </div>
      <div class="login" v-if="userStore.isLogin" @click="logout">退出登录</div>
      <div
        class="rigister"
        @click="registerVisible = true"
        v-if="!userStore.isLogin"
      >
        注册
      </div>

      <!-- <div class="write" @click="$router.push({ name: 'articleEdit' })">
        写文章
      </div> -->
    </div>
  </header>
  <el-dialog title="用户登录" v-model="loginVisible">
    <Login @close="loginVisible = false" />
  </el-dialog>
  <el-dialog title="用户注册" v-model="registerVisible">
    <Register @close="registerVisible = false" />
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { onMounted } from "vue";
import { nextTick } from "vue";
import { useUserStore } from "@/stores/userStore";
import { register } from "@/api/users";
import { ElMessage } from "element-plus";
import search from "@/assets/search.svg";
import { useRoute } from "vue-router";
import Login from "@/views/user/Login.vue";
import Register from "@/views/user/Register.vue";
import router from "@/router";
const loginVisible = ref(false);
const registerVisible = ref(false);
const userStore = useUserStore();
const searchWidth = ref(200);
const key = ref("");
const route = useRoute();
const modules = [
  {
    name: "发现",
    path: "/",
  },
  {
    name: "消息",
    path: "/notice/comment",
  },
  {
    name: "个人中心",
    path: "/user/profile/" + userStore.userInfo.id,
  },
  {
    name: "通知公告",
    path: "/systemNotice",
  },
];
const logout = () => {
  userStore.userInfo = {};
  userStore.token = "";
  userStore.isLogin = false;
  ElMessage.success("注销成功");
  router.push("/");
};
const searchArticle = () => {
  userStore.searchKey = key.value;
};
</script>
<style lang="less" scoped>
header {
  background-color: #fff;
  display: flex;
  align-items: center;
  height: 80px;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 15%;
  box-sizing: border-box;
  .home {
    color: #ec6149;
    font-weight: bolder;
    margin: 0 20px;
  }
  .logo {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-right: 20px;
  }
  .module {
    height: 100%;
    line-height: 80px;
    padding: 0 30px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease-in-out;
    &:hover {
      color: #fff;
      background-color: #ec6149;
    }
  }
  .active {
    color: #fff;
    background-color: #ec6149;
  }
  .user {
    display: flex;
    align-items: center;
    .login {
      color: #969696;
      margin-right: 30px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .rigister {
      padding: 8px 20px;
      box-sizing: border-box;
      border: 1px solid #ec6149;
      border-radius: 20px;
      color: #ec6149;
      margin-right: 30px;
      user-select: none;
      cursor: pointer;
    }
    .write {
      .rigister;
      padding: 8px 30px;
      color: #fff;
      background-color: #ec6149;
    }
  }
  .search {
    margin-left: 20px;
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 20px;
    padding-right: 15px;
    transition: width 0.35s ease-in-out;
    margin-right: auto;

    input {
      padding: 10px 15px;
      box-sizing: border-box;
      border: none;
      background-color: #f0f0f0;
      outline: none;
      border-radius: 20px;
      width: calc(100% - 20px);
    }
    img {
      width: 20px;
      height: 20px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
